<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span> 员工详情
      </p>
      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert(5,4)">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 新增&&编辑员工 -- start-->
    <div class="contaner_staff">
      <div id="head_portrait">
        <!-- 头像 --start-->
        <div class="log">
          <el-upload
            class="avatar-uploader"
            action="/apis/PublicAPI.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <!-- 头像 --end-->
        <div id="log_bottom1">
          <el-input v-model="department" readonly></el-input>
          <el-input v-model="coefficient" readonly></el-input>
        </div>
      </div>

      <div id="table_box44">
        <table width="100%" height="100%">
          <tr>
            <td width="100%" colspan="10">员工信息</td>
          </tr>

          <tr>
            <td width="10%" colspan="1">姓名</td>
            <td width="24%" colspan="3">
              <el-input v-model="name" readonly></el-input>
            </td>
            <td width="10%" colspan="1">性别</td>
            <td width="23%" colspan="2">
              <el-input v-model="sex" readonly></el-input>
            </td>
            <td width="10%" colspan="1">民族</td>
            <td width="23%" colspan="2">
              <el-input v-model="nation" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">出生年月</td>
            <td width="24%" colspan="3">
              <el-input v-model="dateofbirth" readonly></el-input>
            </td>
            <td width="10%" colspan="1">籍贯</td>
            <td width="23%" colspan="2">
              <el-input v-model="nativeplace" readonly></el-input>
            </td>
            <td width="10%" colspan="1">婚姻状况</td>
            <td width="23%" colspan="2">
              <el-input v-model="marriage" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">联系电话</td>
            <td width="24%" colspan="3">
              <el-input v-model="phone" readonly></el-input>
            </td>
            <td width="10%" colspan="1">身份证号码</td>
            <td width="23%" colspan="2">
              <el-input v-model="id" readonly></el-input>
            </td>
            <td width="10%" colspan="1">入职岗位</td>
            <td width="23%" colspan="2">
              <el-input v-model="post" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">户籍地址</td>
            <td width="90%" colspan="9">
              <el-input v-model="permanentaddress" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">现住址</td>
            <td width="90%" colspan="9">
              <el-input v-model="address" readonly></el-input>
            </td>
          </tr>

          <tr>
            <td width="10%" colspan="1">专业社会职称</td>
            <td width="24%" colspan="3">
              <el-input v-model="sociology" readonly></el-input>
            </td>
            <td width="10%" colspan="1">取得时间</td>
            <td width="23%" colspan="2">
              <el-input v-model="getdate" readonly></el-input>
            </td>
            <td width="10%" colspan="1">最高学历</td>
            <td width="23%" colspan="2">
              <el-input v-model="education" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">毕业院校</td>
            <td width="24%" colspan="3">
              <el-input v-model="school" readonly></el-input>
            </td>
            <td width="10%" colspan="1">专业</td>
            <td width="23%" colspan="2">
              <el-input v-model="major" readonly></el-input>
            </td>
            <td width="10%" colspan="1">毕业时间</td>
            <td width="23%" colspan="2">
              <el-input v-model="graduationtime" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">外语水平</td>
            <td width="24%" colspan="3">
              <el-input v-model="languagegrade" readonly></el-input>
            </td>
            <td width="10%" colspan="1">语种</td>
            <td width="23%" colspan="2">
              <el-input v-model="language" readonly></el-input>
            </td>
            <td width="10%" colspan="1">计算机水平</td>
            <td width="23%" colspan="2">
              <el-input v-model="computer" readonly></el-input>
            </td>
          </tr>
          <tr>
            <td width="10%" colspan="1">签订合同时间</td>
            <td width="24%" colspan="3">
              <el-input v-model="signingtime" readonly></el-input>
            </td>
            <td width="10%" colspan="1">合同到期时间</td>
            <td width="23%" colspan="2">
              <el-input v-model="duetime" readonly></el-input>
            </td>
            <td width="10%" colspan="1">提前提醒周期</td>
            <td width="23%" colspan="2">
              <el-input v-model="remind" readonly></el-input>
            </td>
          </tr>
        </table>
        <table width="100%">
          <tr class="tr1">
            <td width="100%" colspan="8">最高学历</td>
          </tr>
          <tr class="tr2">
            <td width="25%" colspan="2">起止时间</td>
            <td width="25%" colspan="2">学校/教育机构名称</td>
            <td width="25%" colspan="2">所学专业/技能</td>
            <td width="25%" colspan="2">取得文凭/资格证书</td>
          </tr>
          <tr class="tr3" v-for="(item,index) in xuelival" :key="index">
            <td width="25%" colspan="2">
              <el-date-picker
                v-model="item.startendtime"
                type="daterange"
                width="100%"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                readonly
              ></el-date-picker>
            </td>
            <td width="25%" colspan="2">
              <el-input v-model="item.school" readonly></el-input>
            </td>
            <td width="25%" colspan="2">
              <el-input v-model="item.specialty" readonly></el-input>
            </td>
            <td width="25%" colspan="2">
              <el-input v-model="item.diploma" readonly></el-input>
            </td>
          </tr>
        </table>
        <table width="100%" height="100%">
          <tr>
            <td width="100%" colspan="10">工作履历</td>
          </tr>
          <tr>
            <td width="25%" colspan="2">起止时间</td>
            <td width="10%" colspan="2">公司名称</td>
            <td width="10%" colspan="1">职位</td>
            <td width="10%" colspan="1">薪资</td>
            <td width="10%" colspan="1">离职原因</td>
            <td width="10%" colspan="1">证明人</td>
            <td width="25%" colspan="2">证明人电话</td>
          </tr>
          <tr v-for="(item,index) in workvalue" :key="index">
            <td width="25%" colspan="2">
              <el-date-picker
                v-model="item.workstartendtime"
                type="daterange"
                width="100%"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                readonly
              ></el-date-picker>
            </td>
            <td width="10%" colspan="2">
              <el-input v-model="item.compony" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.duty" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.salary" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.reason" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.certifier" readonly></el-input>
            </td>
            <td width="25%" colspan="2">
              <el-input v-model="item.phone" readonly></el-input>
            </td>
          </tr>
          <!-- /////////////////////////////////////////////////////////////////////////////////// -->
          <tr>
            <td width="100%" colspan="10">家庭情况</td>
          </tr>
          <tr>
            <td width="20%" colspan="2">姓名</td>
            <td width="20%" colspan="2">与本人关系</td>
            <td width="20%" colspan="2">出生年月</td>
            <td width="10%" colspan="1">工作单位</td>
            <td width="10%" colspan="1">职务</td>
            <td width="20%" colspan="2">联系电话</td>
          </tr>
          <tr v-for="(item,index,ss) in family" :key="ss">
            <td width="20%" colspan="2">
              <el-input v-model="item.name" readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.relation" readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.birth" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.workunit" readonly></el-input>
            </td>
            <td width="10%" colspan="1">
              <el-input v-model="item.duty" readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.phone" readonly></el-input>
            </td>
          </tr>
          <!-- ///////////////////////////////////////////////////////////////// -->
          <tr>
            <td width="100%" colspan="10">培训记录情况</td>
          </tr>
          <tr>
            <td width="21%" colspan="3">起止时间</td>
            <td width="20%" colspan="2">培训内容</td>
            <td width="15%" colspan="1">培训地点</td>
            <td width="15%" colspan="1">培训方式</td>
            <td width="20%" colspan="2">获得证书</td>
          </tr>
          <tr v-for="(item,index,ss) in train" :key="ss">
            <td width="21%" colspan="3">
              <el-date-picker
                v-model="item.pxtime"
                type="daterange"
                width="100%"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                readonly
              ></el-date-picker>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.content " readonly></el-input>
            </td>
            <td width="15%" colspan="1">
              <el-input v-model="item.site " readonly></el-input>
            </td>
            <td width="15%" colspan="1">
              <el-input v-model="item.style " readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.certificate " readonly></el-input>
            </td>
          </tr>

          <tr>
            <td width="100%" colspan="10">奖惩记录</td>
          </tr>
          <tr>
            <td width="20%" colspan="2">何种奖励</td>
            <td width="20%" colspan="2">奖励时间</td>
            <td width="20%" colspan="2">何种惩罚</td>
            <td width="15%" colspan="1">惩罚时间</td>
            <td width="20%" colspan="2">惩罚原因</td>
          </tr>
          <tr v-for="(item,index,ss) in punishmentval" :key="ss">
            <td width="20%" colspan="2">
              <el-input v-model="item.reward " readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.redate " readonly></el-input>
            </td>
            <td width="20%" colspan="2">
              <el-input v-model="item.punishment " readonly></el-input>
            </td>
            <td width="15%" colspan="1">
              <el-input v-model="item.pudate " readonly></el-input>
            </td>
            <td width="20%" colspan="3">
              <el-input v-model="item.reason " readonly></el-input>
            </td>
          </tr>

          <tr height="150">
            <td width="10%" colspan="1">合同</td>
            <td width="90%" colspan="9">
              <el-upload
                action="/apis/PublicAPI.asmx/UpImg"
                list-type="picture-card"
                :on-success="handleAvatarSuccess1"
                :on-remove="handleRemove"
                :limit="5"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl1" alt />
              </el-dialog>
            </td>
          </tr>
          <tr>
            <td width="100%" colspan="10">
              <el-button type="primary" size="medium" @click="addstaff()">确认</el-button>
              <el-button type="info" size="medium" @click="revert()">返回</el-button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <!-- 新增&&编辑员工 -- end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      imageUrl: "",
      imageUrl1: "",
      dialogImageUrl: "",
      dialogVisible: false,

      //

      disabled1: false,
      //
      department: "", //部门
      name: "", //姓名
      sex: "", //性别
      post: "", //入职岗位
      age: "", //年龄
      dateofbirth: "", //出生年月
      phone: "", //联系电话
      nativeplace: "", //籍贯
      nation: "", //民族
      id: "", //身份证号码
      permanentaddress: "", //户籍地址
      address: "", //现住址
      education: "", //最高学历
      major: "", //专业
      hobby: "", //特长爱好
      school: "", //毕业学校
      graduationtime: "", //毕业时间
      workinghours: "", //参加工作时间
      entrytime: "", //可入职时间
      salary: "", //薪资
      marriage: "", //婚姻状况
      signingtime: "", //签订合同日期
      duetime: "", //合同到期时间
      remindertime: "", //社保缴纳
      //最高学历
      startendtime: "", //起止时间
      xuelistartdate: "",
      xuelienddate: "",
      schoolname: "", //学校名称
      skill: "", //专业技能
      diploma: "", //文凭
      //最高学历
      xuelival: [{}],
      //工作履历
      workvalue: [],
      //家庭情况
      family: [],
      //培训情况
      train: [],
      //奖惩记录
      punishmentval: [],
      sexvalue: [{ label: "男" }, { label: "女" }],
      postvalue: [],
      nationvalue: [
        { label: "汉族" },
        { label: "蒙古族" },
        { label: "回族" },
        { label: "藏族" },
        { label: "维吾尔族" },
        { label: "苗族" },
        { label: "彝族" },
        { label: "壮族" },
        { label: "布依族" },
        { label: "朝鲜族" },
        { label: "满族" },
        { label: "侗族" },
        { label: "瑶族" },
        { label: "白族" },
        { label: "土家族" },
        { label: "哈尼族" },
        { label: "哈萨克族" },
        { label: "傣族" },
        { label: "黎族" },
        { label: "傈僳族" },
        { label: "佤族" },
        { label: "畲族" },
        { label: "高山族" },
        { label: "拉祜族" },
        { label: "水族" },
        { label: "东乡族" },
        { label: "纳西族" },
        { label: "景颇族" },
        { label: "柯尔克孜族" },
        { label: "土族" },
        { label: "达斡尔族" },
        { label: "仫佬族" },
        { label: "羌族" },
        { label: "布朗族" },
        { label: "撒拉族" },
        { label: "毛南族" },
        { label: "仡佬族" },
        { label: "锡伯族" },
        { label: "阿昌族" },
        { label: "普米族" },
        { label: "塔吉克族" },
        { label: "怒族" },
        { label: "乌孜别克族" },
        { label: "俄罗斯族" },
        { label: "鄂温克族" },
        { label: "德昂族" },
        { label: "保安族" },
        { label: "裕固族" },
        { label: "京族" },
        { label: "塔塔尔族" },
        { label: "独龙族" },
        { label: "鄂伦春族" },
        { label: "赫哲族" },
        { label: "门巴族" },
        { label: "珞巴族" },
        { label: "基诺族" }
      ],
      educationvalue: [
        { label: "初中" },
        { label: "高中" },
        { label: "中专" },
        { label: "大专" },
        { label: "本科" },
        { label: "研究生" },
        { label: "硕士" },
        { label: "博士" }
      ],
      sociology: "", //专业社会
      getdate: "", //取得时间
      languagegrade: "", //外语水平
      language: "", //语种
      computer: "", //计算机水平
      remind: "", //提前提醒周期
      coefficient: "", //绩效系数
      marriagevalue: [{ label: "未婚" }, { label: "已婚" }, { label: "离异" }],
      coefficientvalue: [
        { key: 1, value: "1" },
        { key: 1, value: "2" }
      ],
      departmentvalue: [],
      pic: [],
      empno: "",
      edustart: "",
      eduend: "",
      trainstart: "",
      trainend: "",
      wardend: "",
      wardstart: "",
      workstart: "",
      workend: ""
    };
  },
  created() {
    this.empno = this.$route.query.empno;
    this.getval();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(this.imageUrl);
    },
    handleAvatarSuccess1(res, file) {
      this.imageUrl1 = URL.createObjectURL(file.raw);
      //this.pic.push( this.imageUrl1)
      //console.log(this.imageUrl1);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    //详情数据
    getval() {
      let arr = { empno: this.empno };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/PersonnelManagement.asmx/Employeelst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        console.log(data3);
        this.department = data3.depart;
        this.coefficient = data3.jixiao;
        this.name = data3.name;
        this.sex = data3.sex;
        this.nation = data3.nation;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.birth.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.dateofbirth = y + "-" + m + "-" + d + " ";
        }
        this.nativeplace = data3.nativeplace;
        this.marriage = data3.ismarrage;
        this.phone = data3.phone;
        this.id = data3.Idcardno;
        this.post = data3.position;
        this.permanentaddress = data3.hjaddress;
        this.address = data3.nowaddress;
        this.sociology = data3.zhuanyename;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.getdate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.getdate = y + "-" + m + "-" + d + " ";
        }
        this.education = data3.maxeducation;
        this.school = data3.finishschool;
        this.major = data3.specialty;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.finishdate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.graduationtime = y + "-" + m + "-" + d + " ";
        }
        this.languagegrade = data3.foreignlevel;
        this.language = data3.language;
        this.computer = data3.Internetlevek;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.contractstarton.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.signingtime = y + "-" + m + "-" + d + " ";
        }
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(data3.overcontractstarton.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.duetime = y + "-" + m + "-" + d + " ";
        }
        this.remind = data3.aheadtime;
        ////最高学历
        var eduval = [];
        data3.lstedu.forEach(item => {
          eduval.push(item);
        });
        this.xuelival = eduval;
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(this.xuelival[i].start.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.edustart = y + "-" + m + "-" + d + " ";
        }
        for (var i = 0; i < 1; i++) {
          var dd = new Date(parseInt(this.xuelival[i].end.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.eduend = y + "-" + m + "-" + d + " ";
        }
        this.xuelival[0].startendtime = [this.edustart, this.eduend];
        ///工作履历
        var workval = [];
        data3.lstwork.forEach(item => {
          workval.push(item);
        });
        this.workvalue = workval;

        for (var i = 0; i < this.workvalue.length; i++) {
          var dd = new Date(parseInt(this.workvalue[i].start.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.workstart = y + "-" + m + "-" + d + " ";
          var dd1 = new Date(parseInt(this.workvalue[i].end.substr(6, 13)));
          var y1 = dd1.getFullYear();
          var m1 = dd1.getMonth() + 1;
          m1 = m1 < 10 ? "0" + m1 : m1;
          var d1 = dd1.getDate();
          d1 = d1 < 10 ? "0" + d1 : d1;
          this.workend = y1 + "-" + m1 + "-" + d1 + " ";
          this.workvalue[i].workstartendtime = [this.workstart, this.workend];
        }
        ///家庭情况
        var famval = [];
        data3.lstfamily.forEach(item => {
          famval.push(item);
        });
        this.family = famval;
        for (var i = 0; i < this.family.length; i++) {
          var dd = new Date(parseInt(this.family[i].birth.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.family[i].birth = y + "-" + m + "-" + d + " ";
        }
        /////培训记录
        var trainval = [];
        data3.lsttrain.forEach(item => {
          trainval.push(item);
        });
        this.train = trainval;
        for (var i = 0; i < this.train.length; i++) {
          var dd = new Date(parseInt(this.train[i].start.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.trainstart = y + "-" + m + "-" + d + " ";
          var dd1 = new Date(parseInt(this.train[i].end.substr(6, 13)));
          var y1 = dd1.getFullYear();
          var m1 = dd1.getMonth() + 1;
          m1 = m1 < 10 ? "0" + m1 : m1;
          var d1 = dd1.getDate();
          d1 = d1 < 10 ? "0" + d1 : d1;
          this.trainend = y1 + "-" + m1 + "-" + d1 + " ";
          this.train[i].pxtime = [this.trainstart, this.trainend];
        }

        //////奖惩记录
        var wardval = [];
        data3.lstreward.forEach(item => {
          wardval.push(item);
        })
        this.punishmentval=wardval
        for (var i = 0; i < this.punishmentval.length; i++) {
          var dd = new Date(parseInt(this.punishmentval[i].pudate.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.punishmentval[i].pudate = y + "-" + m + "-" + d + " ";
          var dd1 = new Date(parseInt(this.punishmentval[i].redate.substr(6, 13)));
          var y1 = dd1.getFullYear();
          var m1 = dd1.getMonth() + 1;
          m1 = m1 < 10 ? "0" + m1 : m1;
          var d1 = dd1.getDate();
          d1 = d1 < 10 ? "0" + d1 : d1;
          this.punishmentval[i].redate = y1 + "-" + m1 + "-" + d1 + " ";

        }
      });
    },

    //返回
    revert(index, index2) {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.contaner_staff {
  background: $white;
  display: flex;
  justify-content: space-between;
}
table {
  border-collapse: collapse;
  text-align: center;
  margin: 0 auto;
  color: rgb(128, 129, 131);
}
table tr td {
  height: 50px;
  border: solid 1px rgb(180, 181, 184);
}

#head_portrait {
  width: 13%;
  padding-left: 1%;
  text-align: center;
}
#table_box44 {
  width: 84%;
  height: 800px;
  overflow: auto;
  background: $white;
}
.tr1 td {
  border-top: none;
  border-left: solid 1px rgb(180, 181, 184);
  border-right: solid 1px rgb(180, 181, 184);
}
.tr2 td {
  border: solid 1px rgb(180, 181, 184);
}
.tr3 td {
  border: solid 1px rgb(180, 181, 184);
  border-bottom: none;
}
.log {
  height: 148px;
  margin-top: 10px;
}
#log_bottom1 {
  height: 200px;
  padding-top: 10px;
}
.bottom {
  background: $white;
  text-align: center;
  margin-top: 10px;
}
</style>
<style >
#table_box44 .el-input__inner {
  border: none;
  color: rgb(128, 129, 131);
  /* font-size: 12px; */
  width: 100%;
}
#table_box44 .el-select {
  width: 100%;
}
#table_box44 .el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
#log_bottom1 .el-input__inner {
  text-align: center;
  margin-bottom: 10px;
}

#table_box13 .avatar-uploader {
  height: 300px;
}
#head_portrait .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#head_portrait .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
#head_portrait .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
#head_portrait .avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>
